<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.small{
		width: 50px;
		height: 50px;
		background:  url(img/bgs.png) -159px -51px no-repeat;
		position: fixed;
		right: 10px;
		top: 40%;
	}
	.erweima{
		position: absolute;
		top: 0;
		left: -150px;
	}
	.small a{
	
	}
	.hide{
		display: none;
	}
	.show{
		display: block;
	}
	</style>
</head>
<body>
	<div class="small" id="small_id">
		<div class="erweima hide" id="erweima_id">
				<img src="img/456.png" alt="">
		</div>
	</div>
	<script>
	function my$(id){
		return document.getElementById(id)
	}
	var small = my$('small_id')
	small.onmouseover = function(){
		my$('erweima_id').className = my$('erweima_id').className.replace('hide','show')
	}
	small.onmouseout = function(){
		my$('erweima_id').className = my$('erweima_id').className.replace('show','hide')
	}
	</script>
</body>
</html>